<template>
    <view class="list">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            bg-color="#F5F5F5"
            :refresher-status.sync="refresherStatus"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            v-model="dataList"
            @query="queryList"
        >
            <view slot="top" style="background-color: #fff">
                <view class="search">
                    <u-search
                        placeholder="搜索提交人/会议主题"
                        v-model="keyword"
                        bgColor="#E1E1E1"
                        color="#333"
                        placeholderColor="#999999"
                        clearabled
                        height="64rpx"
                        @custom="keywordSearch"
                        :actionStyle="actionStyle"
                    />
                </view>
                <u-tabs
                    :list="navList"
                    @click="changeType"
                    :current="current"
                    :scrollable="false"
                    :inactiveStyle="inactiveStyle"
                    :activeStyle="activeStyle"
                    lineColor="#588BF3"
                ></u-tabs>
            </view>
            <view class="item" v-for="(item, index) in dataList" :key="index">
                <view class="cellBox">
                    <view
                        slot="title"
                        class="celltitle flex_wrap row_middle row_between"
                        v-if="current === 2"
                    >
                        提交人：
                        <u--text
                            :text="item.submitManName"
                            color="#588BF3"
                            size="32rpx"
                            align="left"
                            :lines="1"
                        />
                        <u--text
                            :text="`${$u.timeFormat(item.endTime, 'yy/mm/dd')}`"
                            color="#588BF3"
                            size="28rpx"
                            align="right"
                            :lines="1"
                        />
                    </view>
                    <u-cell
                        :iconStyle="cellIconStyle"
                        :titleStyle="cellTitleStyle"
                        size="large"
                        :arrow="false"
                        :border="false"
                    >
                        <view slot="label" class="labelBox flex_column">
                            <view class="lineWrap">
                                <u-image
                                    height="144rpx"
                                    width="144rpx"
                                    :src="
                                        item.picture ||
                                        'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/06/24/8853a0e670f24e83a58134d7815b3015.png'
                                    "
                                    mode="aspectFill"
                                    radius="16rpx"
                                />
                            </view>
                            <view
                                class="flex_column contentWrap"
                                @click="toConferenceDetail(item)"
                            >
                                <view
                                    class="bodyTitle flex_wrap row_middle row_between"
                                >
                                    <u--text
                                        :text="item.theme"
                                        color="#333"
                                        size="40rpx"
                                        bold
                                        :lines="1"
                                    />
                                    <view
                                        class="myWrap"
                                        v-if="
                                            String(item.submitManId) ===
                                            String(userInfo.id)
                                        "
                                    ></view>
                                    <u-icon
                                        name="arrow-right"
                                        color="#588BF3"
                                        size="30rpx"
                                        bold
                                    />
                                </view>
                                <view class="flex_wrap row_between row_bottom">
                                    <view class="flex_wrap column_between">
                                        <u-gap height="18rpx" />
                                        <u-icon
                                            name="/static/img/conference/cellIcon.png"
                                            :label="`${item.addressName || ''}${
                                                item.address
                                            }`"
                                            space="14rpx"
                                            width="36rpx"
                                            height="36rpx"
                                            labelSize="28rpx"
                                            labelColor="#868B9F"
                                            bold
                                        />
                                        <u-gap height="18rpx" />
                                        <u-icon
                                            name="/static/img/conference/pepole.png"
                                            :label="`${item.lecturer || ''}`"
                                            space="14rpx"
                                            width="36rpx"
                                            height="36rpx"
                                            labelSize="28rpx"
                                            labelColor="#868B9F"
                                            bold
                                        />
                                    </view>
                                </view>
                            </view>

                            <view class="flex_wrap row_middle bottomWrap">
                                <u--text
                                    :text="`${$u.timeFormat(
                                        item.startTime,
                                        'yy/mm/dd hh:MM'
                                    )}-${$u.timeFormat(
                                        item.endTime,
                                        'yy/mm/dd hh:MM'
                                    )}`"
                                    @click.self="toConferenceDetail(item)"
                                    color="#588BF3"
                                    size="28rpx"
                                    :lines="1"
                                />
                                <!-- <block
                                    v-if="
                                        [0].includes(current) &&
                                        Number(item.checkState) === 1 &&
                                        item.haveSignedUp !== null &&
                                        String(item.submitManId) !==
                                            String(userInfo.id)
                                    "
                                >
                                    <u-button
                                        :customStyle="customButtonStyle"
                                        color="#588BF3"
                                        text="报名"
                                        shape="circle"
                                        @click.self="signUpHandler(item.id)"
                                        v-if="!item.haveSignedUp"
                                    />
                                    <u-button
                                        :customStyle="customButtonStyle2"
                                        text="取消报名"
                                        plain
                                        color="#999"
                                        shape="circle"
                                        :hairline="false"
                                        @click="cancelSignUpHandler(item.id)"
                                        v-if="
                                            item.haveSignedUp &&
                                            item.meetState === '1'
                                        "
                                    />
                                </block> -->
                                <block
                                    v-if="
                                        current === 2 &&
                                        Number(item.checkState) === 0
                                    "
                                >
                                    <u-button
                                        :customStyle="customButtonStyle"
                                        color="#588BF3"
                                        text="审核"
                                        shape="circle"
                                        @click="toRequestDetail(item.id)"
                                    />
                                </block>
                                <block
                                    v-if="
                                        current === 0 &&
                                        Number(item.checkState) === 0 &&
                                        String(item.submitManId) ===
                                            String(userInfo.id)
                                    "
                                >
                                    <u-button
                                        :customStyle="customButtonStyle"
                                        color="#588BF3"
                                        text="编辑"
                                        shape="circle"
                                        @click="toInitiateMeeting(item.id)"
                                    />
                                </block>
                            </view>
                            <!-- 我的会议 -->
                            <!-- 	<view
								class="constBgWrap"
								@click.self="toConferenceDetail(item)"
								v-if="[0].includes(current) && String(item.submitManId) === String(userInfo.id) && item.meetState === '1'"
							>
								<u--image
									:src="`/static/img/conference/${constBg[item.checkState]}.png`"
									width="160rpx"
									height="160rpx"
									shape="circle"
								/>
							</view> -->
                            <!-- 审核会议 状态 -->
                            <view
                                class="constBgWrap"
                                v-if="['0', '2'].includes(item.checkState)"
                                @click.self="toConferenceDetail(item)"
                            >
                                <u--image
                                    :src="`/static/img/conference/${
                                        constBg[item.checkState]
                                    }.png`"
                                    width="160rpx"
                                    height="160rpx"
                                    shape="circle"
                                />
                            </view>
                            <view
                                class="meetStateWrap"
                                v-if="
                                    ['3', '1'].includes(item.checkState) &&
                                    [0].includes(current)
                                "
                                @click.self="toConferenceDetail(item)"
                                :style="{
                                    background:
                                        item.checkState == '3'
                                            ? '#ffc96c'
                                            : '#faf',
                                }"
                            >
                                {{
                                    item.checkState == "3" ? "已撤销" : "未开始"
                                }}
                            </view>

                            <view
                                class="meetStateWrap"
                                @click.self="toConferenceDetail(item)"
                                v-if="
                                    ['0', '2'].includes(item.meetState) &&
                                    [0, 1].includes(current)
                                "
                                :style="{
                                    background:
                                        item.meetState === '2'
                                            ? '#FF5B5B'
                                            : '#76D196',
                                }"
                            >
                                {{
                                    item.meetState === "2" ? "已结束" : "进行中"
                                }}
                            </view>
                        </view>
                    </u-cell>
                </view>
            </view>
            <view slot="bottom">
                <view class="bottom">
                    <u-button
                        text="发起会议"
                        :customStyle="buttonCustomStyle"
                        shape="circle"
                        @click="toInitiateMeeting"
                    />
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { salesmanInfo } from "@/api/userSalesman.js";

import { mapGetters } from "vuex";
import {
    salesManMeetingPage,
    getSignUpIdByMeetId,
    signUp,
    cancelSignUp,
    getMyMeetList,
    getMyCanSignUpMeetList,
    getHistoryMeetList,
    getSelectCSalesManMeet,
} from "@/api/salesmanMeeting";
export default {
    computed: mapGetters(["userInfo"]),
    options: {
        styleIsolation: "shared", // 解除样式隔离
    },
    data() {
        return {
            actionStyle: {
                fontSize: "28rpx",
                color: "#588BF3",
            },
            buttonCustomStyle: {
                height: "74rpx",
                width: "694rpx",
                backgroundColor: "#588BF3",
                fontSize: "#FFF",
                margin: "0 auto",
                color: "#FFF",
            },
            navList: [
                {
                    name: "我的会议",
                    interface: "1", //1:查订单列表接口 2:查退款订单列表接口
                    status: "", //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                // {
                // 	name: "可报名",
                // 	interface: "1", //1:查订单列表接口 2:查退款订单列表接口
                // 	status: "1" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                // },
                // {
                // 	name: "审核",
                // 	interface: "1", //1:查订单列表接口 2:查退款订单列表接口
                // 	status: "2" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                // },
                {
                    name: "历史",
                    interface: "1", //1:查订单列表接口 2:查退款订单列表接口
                    status: "3", //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
            ],
            inactiveStyle: {
                fontSize: "32rpx",
                color: " #333333",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            current: 0,
            keyword: "",
            // 0:审核中 1：已通过 2：未通过 3：已撤销
            constBg: {
                0: "meetingStatus1",
                1: "meetingStatus2",
                2: "meetingStatus3",
                3: "meetingStatus4",
            },
            modalTitle: "是否报名此会议？",
            modalContent: "",
            showModal: false,
            dataList: [1, 2, 3, 4, 5],
            refresherStatus: 0,
            showFilter: false,
            signUpId: null,
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            cellTitleStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            customButtonStyle: {
                // 报名按钮自定义样式
                width: "158rpx",
                height: "60rpx",
                fontSize: "28rpx",
                margin: "0",
            },
            customButtonStyle2: {
                width: "158rpx",
                height: "60rpx",
                fontSize: "28rpx",
                margin: "0",
                color: "#999",
                background: "#EEF9FF",
                border: "1px solid #999999",
            },
            filterParams: {
                city: "", //市
                county: "", //区
                province: "", // 省
                orderByDate: false, // 日期从最早或最晚开始 （最早为 true 最晚为 false）
                salesManId: "",
                startTimeAfter: "", // 日期结束时间
                startTimeBegin: "", // 日期开始时间
                state: "", // 0:可报名 1：已报名 2:我的会议 3：进行中 4：已结束
            },
        };
    },
    methods: {
        changeType(e) {
            this.keyword = "";
            this.$refs.paging.reload();
            this.current = e.index;
        },
        keywordSearch() {
            this.$refs.paging.reload();
        },
        // 跳转会议详情
        toConferenceDetail(item) {
            let url = null;
            switch (this.current) {
                case 0:
                    // 我的会议  0审核中 2未通过 3已撤销 进入审核详情pages_initiateMeeting/initiateForm/detail页面
                    //  1已通过  进去会议详情pages_conferenceDetail/detail/index
                    // checkState 0审核中  1已通过 2未通过 3已撤销
                    // meetState  0进行中  1未开始 2已结束
                    url = ["0", "2", "3"].includes(item.checkState)
                        ? "pages_initiateMeeting/initiateForm/detail"
                        : "pages_conferenceDetail/detail/index";
                    break;
                case 2:
                    //  审核tab current===2  进入审核详情页面（审核别人）
                    url = "pages_initiateMeeting/auditMeetingRequest/detail";
                    break;
                default:
                    // this.current 1 3 会议详情
                    url = "pages_conferenceDetail/detail/index";
                    break;
            }
            uni.$u.route({
                url,
                params: {
                    meetId: item.id,
                    ...item,
                },
            });
        },
        // 取消报名
        cancelSignUpHandler(meetId) {
            const that = this;
            uni.showModal({
                title: "",
                content: "是否取消报名?",
                success({ confirm, cancel }) {
                    if (confirm) {
                        getSignUpIdByMeetId(meetId).then((res) => {
                            that.signUpId = res.data;
                            cancelSignUp(that.signUpId).then((res) => {
                                uni.$u.toast("取消成功！");
                                that.$refs.paging.refresh();
                            });
                        });
                    }
                },
            });
        },
        // 报名
        signUpHandler(meetId) {
            if (this.userInfo.dimission !== "0") {
                uni.showToast({
                    icon: "none",
                    title: "已离职,不可报名",
                });
                return;
            } else {
                const that = this;
                uni.showModal({
                    title: "",
                    content: "是否报名此会议?",
                    success({ confirm, cancel }) {
                        if (confirm) {
                            signUp(meetId).then((res) => {
                                uni.$u.toast("报名成功");
                                that.$refs.paging.refresh();
                            });
                        }
                    },
                });
            }
        },
        //发起会议
        toInitiateMeeting(id = "") {
            if (this.userInfo.dimission !== "0") {
                uni.showToast({
                    icon: "none",
                    title: "已离职,不可发起",
                });
                return;
            } else {
                uni.$u.route({
                    url:
                        "pages_initiateMeeting/initiateForm/index?meetId=" + id,
                });
            }
        },
        // 审核会议
        toRequestDetail(id) {
            uni.$u.route({
                url:
                    "pages_initiateMeeting/auditMeetingRequest/detail?meetId=" +
                    id,
            });
        },
        async queryList(pageNo, pageSize) {
            const that = this;
            const params = {
                pageSize: pageSize,
                pageNum: pageNo,
                parameter: that.keyword,
                // ...that.filterParams,
            };
            for (const key in params) {
                if (params[key] === "") {
                    delete params[key];
                }
            }
            that.$store.dispatch("USERINFO", { $u: uni.$u }).then(async () => {
                // that.$refs.filter.resetAreas();
                let result;
                switch (that.current) {
                    case 0:
                        result = await getMyMeetList(params);
                        break;
                    case 1:
                        result = await getHistoryMeetList(params);
                        break;
                    // case 2:
                    // 	result = await getSelectCSalesManMeet(params)
                    // 	break
                    // case 3:
                    // 	result = await getHistoryMeetList(params)
                    // 	break
                    default:
                        result = await getMyMeetList(params);
                }
                that.$refs.paging.completeByTotal(
                    result.data.rows,
                    result.total
                );
                // getMyMeetList(params)
                //     .then((result) => {
                //         that.$refs.paging.completeByTotal(
                //             result.data.rows,
                //             result.total
                //         );
                //     })
                //     .catch((e) => {
                //         that.$refs.paging.complete(false);
                //     });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    padding: 32rpx 28rpx;
    background-color: #fff;
}
.item {
    padding: 50rpx;
    padding: 40rpx 28rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 14rpx;
}

.bottom {
    width: 100%;
    height: 100rpx;
    background-color: #fff;
}

.topNav {
    padding: 40rpx 40rpx 20rpx 40rpx;
    background-color: #fff;
}

.filterBox {
    margin-top: 14rpx;
    background-color: #fff;
}

.cellBox {
    background: #f6f7fb;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
}
::v-deep .u-cell__body {
    padding: 0 !important;
}

.celltitle {
    width: 100%;
    height: 80upx;
    border-bottom: 1px solid #f3f3f3;
    padding: 0 38rpx;
    font-size: 32rpx;
    color: #333;
}
.labelBox {
    width: 100%;
    height: auto;
    padding: 20rpx 20upx;
    position: relative;
}
.constBgWrap {
    position: absolute;
    right: 50rpx;
    bottom: 100rpx;
}
.meetStateWrap {
    position: absolute;
    right: 0;
    bottom: 112rpx;
    line-height: 62rpx;
    text-align: center;
    width: 144rpx;
    height: 62rpx;
    background: #76d196;
    border-radius: 80rpx 0rpx 0rpx 80rpx;
    color: #fff;
    font-size: 28rpx;
}
.bottomWrap {
    height: 86rpx;
    background: #eef9ff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    margin-top: 30rpx;
}
.contentWrap {
    padding-left: 154rpx;
    box-sizing: border-box;
}
.myWrap {
    width: 124rpx;
    height: 40rpx;
    background-image: url("@/static/img/conference/mgBg.png");
    margin-right: 18rpx;
    background-size: cover;
}
.lineWrap {
    position: absolute;
    width: 144rpx;
    height: 144rpx;
    border-radius: 16rpx;
}
.statusImage {
    width: 100upx;
    height: 100upx;
}
</style>
